/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useEffect } from "react";
import { Form, Input, Modal, Cascader, Divider } from "antd";
import patterns from "@/utils/patterns";

const DerivativeModal = props => {
  const {
    visible,
    onOk,
    onCancel,
    onPhoneBlur,
    title,
    type,
    cascaderInfo,
    record,
    formValuse,
    form: { getFieldDecorator, getFieldsValue, validateFields, setFieldsValue, resetFields },
  } = props;
  const [shopDisabled, setShopDisabled] = useState(false);
  useEffect(
    () => {
      for (const key in formValuse) {
        setFieldsValue({ [key]: formValuse[key] });
      }
    },
    [formValuse]
  );
  const fromValidateFields = callback => {
    validateFields((err, values) => {
      if (err) {
        return;
      }
      values.type = type;
      record && (values.record = record);
      callback && callback(values);
    });
  };
  const handelPhoneBlur = () => {
    validateFields((err, values) => {
      if (err && "phone" in err) return;
      onPhoneBlur &&
        onPhoneBlur(values).then(
          () => {
            // 如果已经注册的话，把商户信息禁止修改
            setShopDisabled(true);
          },
          () => {
            // 没有注册的话解除禁止
            setShopDisabled(false);
            setFieldsValue({ shop_name: "" });
          }
        );
    });
  };
  const handleOk = () => {
    fromValidateFields(onOk);
    resetFields();
  };
  const handleCancel = () => {
    onCancel && onCancel(getFieldsValue());
    resetFields();
  };
  const formItemLayout = {
    labelCol: { span: 6, offset: 4 },
    wrapperCol: { span: 14 },
    labelAlign: "left",
  };
  function filter(inputValue, path) {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  }
  return (
    <Modal title={title} visible={visible} onOk={handleOk} onCancel={handleCancel}>
      <Form layout="horizontal">
        {type == "add" ? (
          <>
            <Form.Item label="微商信息">
              <Form.Item label="手机号" style={{}} name="phone" {...formItemLayout}>
                {getFieldDecorator("phone", {
                  rules: [{ ...patterns.phone, required: true }],
                })(<Input onBlur={() => handelPhoneBlur()} placeholder="请输入手机号" />)}
              </Form.Item>
              <Form.Item label="店铺名称" {...formItemLayout}>
                {getFieldDecorator("shop_name", {
                  rules: [
                    {
                      required: true,
                      message: "请输入店铺名称",
                    },
                  ],
                })(<Input disabled={shopDisabled} placeholder="请输入店铺名称" />)}
              </Form.Item>
            </Form.Item>
            <Divider />
          </>
        ) : null}
        <Form.Item label="业务员信息">
          <Form.Item {...formItemLayout} label="业务员姓名">
            {getFieldDecorator("courier_no", {
              rules: [
                {
                  required: true,
                  message: "请录入业务员信息",
                },
              ],
            })(
              <Cascader
                placeholder="可根据业务员手机号、姓名搜索"
                showSearch={{ filter }}
                options={cascaderInfo}
              />
            )}
          </Form.Item>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Form.create()(DerivativeModal);
